<template>
  <div :class="prefixCls" v-bind="$attrs">
    <HUpload
      v-bind="bindValue"
      @change="handleChange"
      @delete="handleDelete"
      v-if="compType === CompType.DRAGGABLE"
    />
    <BasicUpload
      v-bind="bindValue"
      @change="handleChange"
      @save="handleChange"
      @preview-delete="handleDelete"
      v-else
    />
  </div>
</template>

<script lang="ts" setup name="UploadBasic">
  import { PropType, useAttrs, computed } from 'vue';
  import { CompType } from './typing';
  import BasicUpload from './BasicUpload.vue';
  import { HUpload } from './HUpload';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { omit } from 'lodash-es';

  const { prefixCls } = useDesign('upload-basic');
  const props = defineProps({
    compType: {
      type: Number as PropType<CompType>,
    },
  });
  const emit = defineEmits(['change', 'delete']);
  const attrs = useAttrs();
  const bindValue = computed(() => {
    const value = { ...attrs, ...props };

    return omit(value, ['componentProps', 'onChange']);
  });
  const handleChange = (...arg) => {
    emit('change', ...arg);
  };
  const handleDelete = (...arg) => {
    emit('delete', ...arg);
  };
</script>
<style lang="less" scoped></style>
